<template>
  <div class="pd-30 pd-t-15 flex flex-column">
    <div style="height: 40px" class="flex flex-row flex-nowrap flex-align-item-center">
      <el-checkbox type="primary" v-model="onlyNotExpired">只看未过期活动</el-checkbox>
      <transition name="el-zoom-in-top">
        <el-button v-show="batchDelBtn" type="danger" @click="delActivity(multipleSelection)">批量删除</el-button>
      </transition>
    </div>
    <el-table
        stripe
        border
        style="min-width: 1280px;width: 90%"
        empty-text="暂无活动"
        class="mt-10 mb-15"
        :data="activities"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="事项"
          prop="title"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          label="开始时间"
          width="120"
      >
        <template v-slot="{row}">
          {{ $dayjs(row.start_time * 1).format('MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
          label="结束时间"
          width="120"
      >
        <template v-slot="{row}">
          {{ $dayjs(row.end_time * 1).format('MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
          label="活动地址"
          prop="activity_address"
      >
      </el-table-column>
      <el-table-column
          label="活动人数"
          prop="num_of_people"
          width="80"
          align="center"
      >
      </el-table-column>
      <el-table-column
          label="需要签到"
          width="80"
          align="center"
      >
        <template v-slot="{row}">
          {{ row.signin_require == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template v-slot="{row}">
          <div class="flex flex-row flex-nowrap">
            <el-button type="primary" icon="el-icon-edit" @click="editActivity(row)">查看/修改</el-button>
            <el-button v-if="row.end_time*1>timestamp" @click="openInformFormDialog(row)">发送通知</el-button>
            <el-button type="danger" @click="delActivity([row.id])">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-show="total>10"
        :page-size="limit"
        :current-page.sync="pageNo"
    ></el-pagination>

    <InformForm :data="informDialog"/>

    <el-drawer custom-class="pd-30" size="800px" :visible.sync="drawer" :with-header="false" direction="ltr">
      <Edit :activity="modifiedActivity" :drawer.sync="drawer"/>
    </el-drawer>
  </div>
</template>

<script>
import {mapState} from "vuex";
import Edit from "./edit/edit";

export default {
  name: "ActivityList",
  components: {Edit},
  data() {
    return {
      informDialog: {
        title:'123',
        visible:false,
      },
      batchDelBtn: false, // 批量删除按钮
      multipleSelection: [],
      limit: 10,
      pageNo: 1,
      drawer: false,
      onlyNotExpired: false,
      modifiedActivity: {}, // 需要修改的活动
    }
  },
  mounted() {
    this.getActivities()
  },
  methods: {
    // 批量删除
    delActivity(ids) {
      this.$store.dispatch('activity/delActivity',ids).then(
          ()=>{
            this.$message.success('成功')
            this.getActivities();
          }
      )
    },
    getActivities() {
      this.$store.dispatch('activity/getActivities', {
        society_id: this.$store.getters.society_id,
        pageNo: this.pageNo,
        limit: this.limit,
        onlyNotExpired: this.onlyNotExpired
      })
    },
    handleSelectionChange(val) {
      this.batchDelBtn = val.length !== 0;
      let arr = []
      val.forEach(item => {
        arr.push(item.id)
      })
      this.multipleSelection = arr
    },
    editActivity(row) {
      this.modifiedActivity = {...row, activityTime: [row.start_time, row.end_time]};
      this.drawer = true;
    },
    openInformFormDialog(row){
      this.informDialog = {
        title: row.title,
        visible: true,
        activityId:row.id,
      }
    },
  },
  computed: {
    ...mapState('activity', ['total','activities']),
    timestamp(){
      return Date.now();
    },
  },
  watch: {
    pageNo() {
      this.getActivities();
    },
    drawer(newVal) {
      if (newVal === false) {
        this.getActivities();
      }
    },
    onlyNotExpired(){
      this.getActivities();
    }
  }
}
</script>

<style scoped>

</style>